<template>
  <div>
    <el-row>
      <el-col :span="6">
        <el-card shadow="hover" style="width: 100%">
          <div slot="header" class="clearfix">
            <span>
              <el-icon style="color: red"><Flag /></el-icon> 今日订单数</span
            >
          </div>
          <div style="font-size: 18px; text-align: center; margin-top: 15px">
            {{ nums[0] }} 笔
          </div>
          <div style="margin-top: 15px"></div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" style="width: 100%">
          <div slot="header" class="clearfix">
            <span>
              <el-icon style="color: yellow"><Flag /></el-icon> 昨日订单数</span
            >
          </div>
          <div style="font-size: 18px; text-align: center; margin-top: 15px">
            {{ nums[1] }} 笔
          </div>
          <div style="margin-top: 15px"></div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" style="width: 100%">
          <div slot="header" class="clearfix">
            <span>
              <el-icon style="color: blue"><Flag /></el-icon>
              本周订单数</span
            >
          </div>
          <div style="font-size: 18px; text-align: center; margin-top: 15px">
            {{ nums[2] }} 笔
          </div>
          <div style="margin-top: 15px"></div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" style="width: 100%">
          <div slot="header" class="clearfix">
            <el-icon style="color: green"><Flag /></el-icon>
            <span> 本月订单数</span>
          </div>
          <div style="font-size: 18px; text-align: center; margin-top: 15px">
            {{ nums[3] }} 笔
          </div>
          <div style="margin-top: 15px"></div>
        </el-card>
      </el-col>
    </el-row>
    <div style="margin-top: 15px"></div>
    <el-row>
      <el-col :span="12">
        <el-card shadow="hover" style="width: 100%">
          <div slot="header" class="clearfix">
            <span>
              <el-icon style="color: red"><TopRight /></el-icon>
              最近7天订单数量趋势</span
            >
          </div>
          <div
            id="container1"
            style="height: 250px; font-size: 18px; text-align: center"
          ></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover" style="width: 100%">
          <div slot="header" class="clearfix">
            <span>
              <el-icon style="color: green"><Histogram /></el-icon>
              最近7天销售金额趋势</span
            >
          </div>
          <div
            id="container2"
            style="height: 250px; font-size: 18px; text-align: center"
          ></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, Ref, ref } from "vue";
import { countNum, countDaysNum, countDaysPrice } from "@/api/order";
import { CODE } from "@/utils/StatusCode";
import useEchar from "@/utils/userEcharts";

onMounted(() => {
  getData();
});
const nums = ref([]);
let daysNums: { dates: any; nums: any };
let daysprices: { dates: any; totalPrices: any };
function getData() {
  getNum();
  getDaysNum();
  getDaysPrice();
}
async function getNum() {
  const res = await countNum({});
  if (res.code == CODE.OK) {
    nums.value = res.data;
  }
}
async function getDaysNum() {
  const res = await countDaysNum({ day: 7 });
  if (res.code == CODE.OK) {
    daysNums = res.data;
    initChart1();
  }
}
async function getDaysPrice() {
  const res = await countDaysPrice({ day: 7 });
  if (res.code == CODE.OK) {
    daysprices = res.data;
    initChart2();
  }
}
const myChart = ref()

function initChart1() {
  const option = {
    xAxis: {
      type: "category",
      data: daysNums.dates,
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: daysNums.nums,
        type: "line",
      },
    ],
  };
  myChart.value = useEchar(option, "container1");
}

function initChart2() {
  const option = {
    xAxis: {
      type: "category",
      data: daysprices.dates,
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: daysprices.totalPrices,
        type: "bar",
      },
    ],
  };

  myChart.value = useEchar(option, "container2");
}
</script>

<style lang="less" scoped>
.chart {
  width: 400px;
  height: 400px;
}
.el-icon {
  font-size: 14px;
}
</style>
